<!--
 * @Descripttion: 弹幕容器
 * @version: 1.0
 * @Author: 自由如风
 * @Date: 2021-05-21 19:38:23
 * @LastEditors: 自由如风
 * @LastEditTime: 2021-05-23 15:14:56
-->

<template>
  <div ref="barrageContainer" class="barrage-container">
    <BarrageTrack
      ref="tarck"
      v-for="(item, index) in count"
      :key="index"
    ></BarrageTrack>
  </div>
</template>

<script>
import COLOR from "../assets/color.json";
import animate from "animate.css";
import BarrageTrack from "./BarrageTrack";
export default {
  data() {
    return {
      count: 1,
    };
  },
  components: {
    BarrageTrack,
  },
  computed: {
    barrage() {
      return this.$store.state.setting.barrage;
    },
  },
  methods: {
    add(barrage = {}) {
      /** 停止添加弹幕*/
      if (!this.barrage) {
        return false;
      }
      const R = Math.random();
      if (!barrage.avatar) {
        const index = Math.floor(R * 15);
        barrage.avatar = require(`@/assets/avatar/${index}.jpg`);
      }
      if (!barrage.speed) {
        const speed = Math.ceil(R * 10) + 10;
        barrage.speed = speed + this.$store.state.config.speed;
      }
      if (!barrage.bgcolor) {
        barrage.bgcolor = COLOR[Math.floor(R * COLOR.length)];
      }
      /**
       * 将所有的赛道按照添加的时间进行排序，时间小的排在前面
       */
      this.$refs.tarck.sort((e1, e2) => e1.time - e2.time);

      this.$refs.tarck[0].add(barrage);
      return true;
    },
  },
  mounted() {
    this.count = Math.floor(
      (parseInt(window.getComputedStyle(this.$refs.barrageContainer).height) -
        60) /
        54
    );
  },
};
</script>

<style scoped>
.barrage-container {
  padding: 30px 0;
  height: 100%;
  box-sizing: border-box;
}
</style>